<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="css/social_media.css"/>
</head>
<style>

    body {
        font: 10px sans-serif;
    }

    .arc path {
        stroke: #fff;
    }

</style>
<body>
<div align="center" style="height:700px;width:100%;float:left;" id="pie_fe">
    <h1> Friends && Enemies</h1>
</div>
<script src="js/d3.js"></script>
<script src="js/jquery-1.4.2.min.js"></script>
<script src="js/social_media.js"></script>
<script>
    var width = 560,
        height = 500,
        radius = Math.min(width, height) / 2;

    var color = d3.scale.category10();
//开始画friend enemies-------------------------------------------------------------------------------------------------
    var arc_fe = d3.svg.arc()
            .outerRadius(radius - 10)
            .innerRadius(0);

    var pie_fe = d3.layout.pie();



    var svg_fe = d3.select("#pie_fe").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var dataset=[];
    var nameset=[];

    d3.json("data/stastics_data.json", function(error, d) {

        data=d[0].friend_enemy_distribution;
//        var friends  =
//        {
//            "name" : "friends",
//            "value" : data.friends
//        }
//        var enemies=
//        {
//            "name" : "enemies",
//            "value" : data.enemies
//        }
//
//        dataset.push(friends);
//        dataset.push(enemies);
//        console.log(dataset);

        dataset.push(data.friends);
        dataset.push(data.enemies);


        nameset.push("Friends"+":"+d3.round(100*dataset[0]/(dataset[0]+dataset[1]),2)+"%");
        nameset.push("Enemies"+":"+d3.round(100*dataset[1]/(dataset[0]+dataset[1]),2)+"%");

        var g_fe = svg_fe.selectAll(".arc_fe")
                .data(pie_fe(dataset))
                .enter().append("g")
                .attr("class", "arc");

        g_fe.append("path")
                .attr("d", arc_fe)
                .style("fill", function(d) {  return color(d.value); });

        g_fe.append("text")
                .attr("transform", function(d) { return "translate(" + arc_fe.centroid(d) + ")"; })
                .attr("dy", ".35em")
                .style("text-anchor", "middle")
                .text(function(d,i) { return nameset[i]; });



    });

    //开始画normal inverse-------------------------------------------------------------------------------------------------------
//    var arc_ni = d3.svg.arc()
//            .outerRadius(radius - 10)
//            .innerRadius(0);
//
//    var pie_ni = d3.layout.pie();
//
//    var svg_ni = d3.select("#pie_ni").append("svg")
//            .attr("width", width)
//            .attr("height", height)
//            .append("g")
//            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
//
//    var dataset_ni=[];
//    var nameset_ni=[];
//
//    d3.json("data/stastics_data.json", function(error, d) {
//
//        data = d[0].inverse_normal_distribution;
//        dataset_ni.push(data.normal);
//        dataset_ni.push(data.inverse);
//
//
//        nameset_ni.push("Friends" + ":" + d3.round(100 * dataset_ni[0] / (dataset_ni[0] + dataset_ni[1]), 2) + "%");
//        nameset_ni.push("Enemies" + ":" + d3.round(100 * dataset_ni[1] / (dataset_ni[0] + dataset_ni[1]), 2) + "%");
//
//        var g_ni = svg_ni.selectAll(".arc_ni")
//                .data(pie_fe(dataset_ni))
//                .enter().append("g")
//                .attr("class", "arc");
//
//        g_ni.append("path")
//                .attr("d", arc_fe)
//                .style("fill", function (d) {
//                    return color(d.value);
//                });
//
//        g_ni.append("text")
//                .attr("transform", function (d) {
//                    return "translate(" + arc_ni.centroid(d) + ")";
//                })
//                .attr("dy", ".35em")
//                .style("text-anchor", "middle")
//                .text(function (d, i) {
//                    return nameset_ni[i];
//                });
//    });

</script>
</body>
</html>